<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <div>{{user.userName}} - {{user.password}}</div>


    <img :src="imgSrc">
    <ol >
        <li v-for="user in users" :key="user.id">{{user.id}} : {{user.userName}} - {{user.password}}</li>
    </ol>
</div>
</body>
</html>
<script>
    const {createApp, ref, onMounted} = Vue

    createApp({
        setup() {

            const message = ref(100)
            message.value = "hi david";

            const user =ref({
                userName : "david",
                password : "123"
            })

            const imgSrc = ref("images/img_1.png");

            const users = ref([
                    {id: "1", userName: "david", password: "123"},
                    {id: "2", userName: "king", password: "234"},
                    {id: "3", userName: "tom", password: "345"}
                ]
            )

            //钩子函数 先获取数据
            onMounted(() => {
                //Ajax 获得数据
                fetch('http://localhost:8082/query?pageSize=3&pageNum=2')
                    .then(response => response.json())
                    .then(data => {
                        console.log(data)
                        users.value = data
                    })
            })

            return {
                message, user, imgSrc, users
            }
        }
    }).mount('#app')
</script>
